葫芦的运维日志

下一篇 搜索 上一篇

---

 

 

Header.vue

<template>
  <header v-on:click="changetitle">
    <h1>{{title}}{{title1}}</h1>
  </header>
</template>

<script>
  export default {
    name: 'app-header',
    props: {
      title1: {
        type: String
      }
    },
    data() {
      return {
        title: 'Vue.js Demo'
      }
    },
    methods: {
      changetitle: function () {
        // this.title1 = 'changed';
        this.$emit("titleChanged","子to父组件传值");
      }
    },
    beforeCreate:function () {
      alert("beforeCreate,组件实例化之前执行的函数");
    },
    created:function () {
      alert("created,组件实例化完毕，但页面还未显示");
    },
    beforeMount:function () {
      alert("beforeMount,组件挂载前，页面仍未显示，但虚拟dom已经配置");
    },
    mounted:function () {
      alert("mounted,组件挂载后，此方法执行后，页面显示");
    },
    beforeUpdate:function () {
      alert("beforeUpdate,组件更新前，页面仍未更新，单虚拟dom已经配置");
    },
    updated:function () {
      alert("updated,组件更新，此方法执行后，页面显示")
    },
    beforeDestroy:function () {
      alert("beforeDestroy,组件销毁前");
    },
    destroyed:function () {
      alert("destroyed，组件销毁");
    }


  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  header {
    background: lightgreen;
    padding: 10px;
  }

  h1 {
    color: #222;
    text-align: center;
  }
</style>

 

葫芦的运维日志

打赏

上一篇 搜索 下一篇